<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  
    <style>
      .dialog { 
        width: 600px; height: 400px; margin: auto; border: 1px solid #ddd;
        border-radius: 15px;
        background-color: #fff;
        box-shadow: 0 3px 18px rgba(0,0,0,.5);
      }
      .dialog_absolute { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }
  
      .button { display: block; margin: 170px auto; width: 160px; height: 36px; font-size: 14px; }
    </style>
  
  
  </head>

  <body>
    <script>
			
				var eleDialog = document.getElementById("dialog"),
        eleButton = document.getElementById("button");
    
				eleButton.onclick = function() {
						if (eleDialog.className === "dialog") {
								eleDialog.className = "dialog dialog_absolute";
								this.value = "点击弹框降落~~";    
						} else {
								eleDialog.className = "dialog";
								this.value = "点击弹框走起~~";    
						}
						alert(eleDialog.className);
				};
				
			function changeImage() {
				alset("测试");
			}
     
    </script>
  
    <div id="dialog" class="dialog">
        <input type="button" id="button" class="button" " value="点击弹框走起~~" />
    </div>
    onclick="changeImage();
  </body>
</html>
